<!-- 首页 -->
<template>
  <div class='dsfsdrexer'>
    <div class="fdfxcer">
      <div class="kkmxetxwer display-flex czbj">
        <div class="pd pt5 ">
          <i class="iconfont dx-yonghuguanli_huaban ls cz fz20"></i>
          <span class="fz14 ml5">基础数据</span>
        </div>
        <div class="btm display-flex flex-1 pd pt10 pm10">
          <div class="kkzxcdrfdr">
            <div class=" display-flex">
              <div class="dfsderxe">
                <i class="iconfont dx-map1 cfsdfdrerxz aa"></i>
              </div>
              <div class="flex-1 ml5 pt10 kxcvderter">
                <div class="b fz20">6</div>
                <div>
                  运营站点(个)
                </div>
              </div>
            </div>

            <div class=" display-flex mt10">
              <div class="dfsderxe">
                <i class="iconfont dx-shoukuan cfsdfdrerxz ab"></i>
              </div>
              <div class="flex-1 ml5 pt15 kxcvderter">
                <div class="b fz20">5992.09 <span class="fz14">元</span></div>
                <div>
                  本月收款
                </div>
              </div>
            </div>
          </div>

          <div class="flex-1">

            <div class=" display-flex ">
              <div class="dfsderxe">
                <i class="iconfont dx-a-2duohangwenben cfsdfdrerxz ac"></i>
              </div>
              <div class="flex-1 ml5 pt10 kxcvderter">
                <div class="b fz20 dsdfsc">45.04 <span class="fz14">度</span></div>
                <div>
                  今日用电量
                </div>
              </div>
              <div class="flex-1 ml5 pt10 kxcvderter">
                <div class="b fz20 dsdfsc">45.04 <span class="fz14">度</span></div>
                <div>
                  昨日用电量
                </div>
              </div>
            </div>

            <div class=" display-flex mt10">
              <div class="dfsderxe">
                <i class="iconfont dx-shujuzhongxinshujucangku cfsdfdrerxz ad"></i>
              </div>
              <div class="flex-1 ml5 pt10 kxcvderter">
                <div class="b fz20 dsdfsd">474.85 <span class="fz14">元</span></div>
                <div>
                  今日收款
                </div>
              </div>
              <div class="flex-1 ml5 pt10 kxcvderter">
                <div class="b fz20 dsdfsd">474.85 <span class="fz14">元</span></div>
                <div>
                  昨日收款
                </div>
              </div>
            </div>

          </div>



        </div>
      </div>

      <div class="kkmxetxwer display-flex czbj">
        <div class="pd pt5 ">
          <i class="iconfont dx-chongdianqi ls cz fz20"></i>
          <span class="fz14 ml5">充电数据</span>
        </div>
        <div class="btm flex-1 ">
          <div class="w100 h100" ref="fsdxdsrfsda"></div>
        </div>

      </div>

      <div class="kkmxetxwer display-flex czbj">
        <div class="pd pt5 ">
          <i class="iconfont dx-gaojing ls cz fz20"></i>
          <span class="fz14 ml5">告警信息</span>
        </div>
        <div class="btm flex-1 ">
          <div class="w100 h100" ref="fsdxdsrfsdb"></div>
        </div>

      </div>
    </div>
    <div class="mt10 jmzxcsdssr display-flex">
      <div class="flex-1 kkmxetxwer mr5">
     
          <div class="kkfdsfsdsrer pd pt10 display-flex bbm">
            <div class="flex-1">
              <n-tabs>
              <n-tab-pane name="消耗电量" tab="消耗电量"></n-tab-pane>
              <n-tab-pane name="使用率" tab="使用率"> </n-tab-pane>
              <n-tab-pane name="订单数" tab="订单数"></n-tab-pane>
            </n-tabs>
            </div>
            <div class=" vertical-center">
              (数据更新：{{ jjsrrs }})
            </div>
          </div>
    


        <div class=" display-flex pl10">
          <div class="kkxzczrerer flex-1" ref="jmxetxewerr">

          </div>
          <div class=" vertical-center fdsfsserxser">
            <div>
              <div class="kkmxzczxsdfer cen pt10">
                <p class="fz20">177.18</p>
                <p>日平均消耗电量(度)</p>
              </div>
              <div class="kkmxzczxsdfer cen pt10 mt20 ab">
                <p class="fz20">275.26</p>
                <p>最高消耗电量(度)</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 kkmxetxwer ml5">
        <div class="kkfdsfsdsrer pd pt10 display-flex bbm">
            <div class="flex-1">
              <n-tabs>
              <n-tab-pane name="使用率前10" tab="使用率前10"></n-tab-pane>
              <n-tab-pane name="使用率后10" tab="使用率后10"> </n-tab-pane>
            </n-tabs>
            </div>
            <div class=" vertical-center">
              (数据更新：{{ jjsrrs }})
            </div>
          </div>

          <div class="pd pt10">
            <n-table :single-line="false" class="cen">
    <thead>
      <tr>
        <th>排序</th>
        <th>站点名称</th>
        <th>使用率(%)</th>
        <th>设备插头(个)</th>
        <th>投运(天)</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,idx) in 10">
        <td>{{ idx+1 }}</td>
        <td>东城美地4栋车库</td>
        <td>78.57</td>
        <td>82</td>
        <td>831</td>
      </tr>
   
    </tbody>
  </n-table>
          </div>

      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, nextTick } from "vue";
import { transferTimeYMDHm } from "../../util/index";
const fsdxdsrfsda = ref()
const fsdxdsrfsdb = ref()
const jmxetxewerr = ref()
const jjsrrs = ref(transferTimeYMDHm(new Date()))


nextTick(() => {
  var myCharta = window.echarts.init(fsdxdsrfsda.value);
  myCharta.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'center',
      width: 100,
      right: "5%"
    },
    title: [
      {
        text: '423',
        subtext: '插座总数',
        textStyle: {
          fontSize: 26,
          color: "#76B9FF",
          fontWeight: 'bold'
        },
        subtextStyle: {
          fontSize: 12,
          color: '#666',
        },
        textAlign: "center",
        x: '49%',
        y: '35%',
      }],
    series: [
      {
        name: '充电数据',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,

        label: {
          show: false,
          position: 'center'
        },


        labelLine: {
          show: false
        },
        data: [
          { value: 43, name: '充电(43个)' },
          { value: 374, name: '空闲(374个)' },
          { value: 0, name: '故障(0个)' },
          { value: 5, name: '离线(5个)' },
          { value: 1, name: '停用(1个)' }
        ]
      }
    ]
  });

  var myChartb = window.echarts.init(fsdxdsrfsdb.value);
  myChartb.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 'center',
      width: 100,
      right: "5%"
    },

    series: [
      {
        name: '告警信息',
        type: 'pie',
        radius: ['20%', '80%'],
        avoidLabelOverlap: false,

        label: {
          show: false,
          position: 'center'
        },


        labelLine: {
          show: false
        },
        data: [
          { value: 5, name: '离线充电桩 5' },
          { value: 0, name: '故障充电桩 0' },
          { value: 0, name: '离线网关 0' },
          { value: 0, name: '离线门禁 0' }
        ]
      }
    ]
  });




  var myChartc = window.echarts.init(jmxetxewerr.value);
  myChartc.setOption({
    xAxis: {
      type: 'category',
      data: ['2023-09-29', '2023-09-30', '2023-09-31', '2023-10-1', '2023-10-2', '2023-10-3', '2023-10-5', '2023-10-6', '2023-10-7', '2023-10-8', '2023-10-9']
    },
    grid: {
      left: '2%',
      right: '0%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      type: 'value',
      name: '消耗电量(度)',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130, 120, 60, 180, 150],
        barWidth: 40,
        color: "#21C392",
        type: 'bar',
        label: {
          show: true,
          position: 'top'
        },
      }
    ]
  })

})

</script>
<style scoped>
.dsfsdrexer {}

.fdfxcer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px
}

.kkmxetxwer {
  min-height: 200px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.kkzxcdrfdr {
  width: 200px;
  height: 100%;
}

.cfsdfdrerxz {
  font-size: 40px;
}

.kxcvderter {
  line-height: 1.4;
}

.cfsdfdrerxz.aa {
  color: #27A1CD;
}

.cfsdfdrerxz.ab {
  color: #F35454;
  font-size: 48px;
}

.dsdfsc,
.cfsdfdrerxz.ac {
  color: #F8AD59;
}

.dsdfsd,
.cfsdfdrerxz.ad {
  color: #76B9FF;
}

.dfsderxe {
  width: 50px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.jmzxcsdssr {
  height: 600px;
}

.kkxzczrerer {
  height: 520px
}

.fdsfsserxser {
  width: 200px
}

.kkmxzczxsdfer {
  width: 160px;
  height: 80px;
  background: #C4E7FD;
  border: 1px solid #3CAEF7;
  border-radius: 4px;
  color: #3CAEF7;
}

.kkmxzczxsdfer.ab {
  background: #FCE5D1;
  border-color: #F4A869;
  color: #F4A869
}</style>